<template>
   <div class="header">
      <slot name="title">
        <span>{{ title }}</span>
      </slot>
      <span class="title-right">
        <slot name="title-right"></slot>
      </span>
    </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    }
  }
}
</script>
<style lang="scss" scoped>
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &::before {
        content: "";
        display: block;
        width: 4px;
        height: 19px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        position: absolute;
        left: 0;
        top: 15px;
        background-color: #f99c34;
      }
    }
</style>